A Navigation API mesterfogásai: Egyoldalas alkalmazások (SPA) útvonalválasztása és előzménykezelése

A Navigation API jelentős előrelépést képvisel az egyoldalas alkalmazások (SPA-k) útvonalválasztásának és előzménykezelésének módjában. A hagyományos módszerek gyakran a `window.location` objektum manipulálására vagy harmadik féltől származó könyvtárak használatára támaszkodnak. Bár ezek a megközelítések jól szolgáltak minket, a Navigation API egy letisztultabb, teljesítményorientáltabb és funkciókban gazdagabb megoldást kínál, amely nagyobb kontrollt biztosít a fejlesztőknek a felhasználói navigációs élmény felett.

Mi az a Navigation API?

A Navigation API egy modern böngésző API, amelyet arra terveztek, hogy egyszerűsítse és javítsa az SPA-k navigáció-, útvonalválasztás- és előzménykezelését. Bevezet egy új `navigation` objektumot, amely olyan metódusokat és eseményeket biztosít, amelyek lehetővé teszik a fejlesztők számára a navigációs események elfogását és vezérlését, az URL frissítését és a konzisztens böngészési előzmények fenntartását a teljes oldalbetöltés nélkül. Ez gyorsabb, zökkenőmentesebb és reszponzívabb felhasználói élményt eredményez.

A Navigation API használatának előnyei

• Jobb teljesítmény: A teljes oldalbetöltések kiküszöbölésével a Navigation API jelentősen javítja az SPA-k teljesítményét. A különböző nézetek közötti átmenetek gyorsabbá és zökkenőmentesebbé válnak, ami vonzóbb felhasználói élményt eredményez.
• Fokozott kontroll: Az API részletes kontrollt biztosít a navigációs események felett, lehetővé téve a fejlesztők számára, hogy szükség szerint elfogják és módosítsák a navigációs viselkedést. Ez magában foglalja a navigáció megakadályozását, a felhasználók átirányítását és egyedi logika végrehajtását a navigáció előtt vagy után.
• Egyszerűsített előzménykezelés: A böngésző előzményvermének kezelése egyszerűbbé válik a Navigation API-val. A fejlesztők programozottan hozzáadhatnak, lecserélhetnek és bejárhatnak előzménybejegyzéseket, biztosítva a konzisztens és kiszámítható böngészési élményt.
• Deklaratív navigáció: A Navigation API egy deklaratívabb megközelítést ösztönöz az útvonalválasztásban, lehetővé téve a fejlesztők számára, hogy a navigációs szabályokat és viselkedéseket világos és tömör módon határozzák meg. Ez javítja a kód olvashatóságát és karbantarthatóságát.
• Integráció modern keretrendszerekkel: A Navigation API-t úgy tervezték, hogy zökkenőmentesen integrálódjon a modern JavaScript keretrendszerekkel és könyvtárakkal, mint például a React, az Angular és a Vue.js. Ez lehetővé teszi a fejlesztők számára, hogy az API funkcióit a meglévő fejlesztési munkafolyamataikban is kihasználják.

Alapvető fogalmak és funkciók

1. A `navigation` objektum

A Navigation API szíve a `navigation` objektum, amely a globális `window` objektumon keresztül érhető el (azaz `window.navigation`). Ez az objektum hozzáférést biztosít a navigációval kapcsolatos különböző tulajdonságokhoz és metódusokhoz, többek között:

• `currentEntry`: Egy `NavigationHistoryEntry` objektumot ad vissza, amely a navigációs előzmények aktuális bejegyzését képviseli.
• `entries()`: A navigációs előzmények összes bejegyzését képviselő `NavigationHistoryEntry` objektumokból álló tömböt ad vissza.
• `navigate(url, { state, info, replace })`: Új URL-re navigál.
• `back()`: Visszanavigál az előző előzménybejegyzésre.
• `forward()`: Előrenavigál a következő előzménybejegyzésre.
• `reload()`: Újratölti az aktuális oldalt.
• `addEventListener(event, listener)`: Eseményfigyelőt ad hozzá a navigációval kapcsolatos eseményekhez.

2. `NavigationHistoryEntry`

A `NavigationHistoryEntry` interfész egyetlen bejegyzést képvisel a navigációs előzményekben. Információt nyújt a bejegyzésről, mint például annak URL-címét, állapotát és egyedi azonosítóját.

• `url`: Az előzménybejegyzés URL-je.
• `key`: Egyedi azonosító az előzménybejegyzéshez.
• `id`: Egy másik egyedi azonosító, amely különösen hasznos egy navigációs esemény életciklusának nyomon követéséhez.
• `sameDocument`: Logikai érték, amely jelzi, hogy a navigáció ugyanazon dokumentumon belüli navigációt eredményez-e.
• `getState()`: Visszaadja az előzménybejegyzéshez társított állapotot (amely a navigáció során lett beállítva).

3. Navigációs események

A Navigation API számos eseményt bocsát ki, amelyek lehetővé teszik a fejlesztők számára a navigációs viselkedés figyelését és vezérlését. Ezek az események a következők:

• `navigate`: Akkor aktiválódik, amikor egy navigáció elindul (pl. egy linkre kattintás, egy űrlap elküldése vagy a `navigation.navigate()` meghívása). Ez az elsődleges esemény a navigációs kérelmek elfogására és kezelésére.
• `navigatesuccess`: Akkor aktiválódik, amikor egy navigáció sikeresen befejeződik.
• `navigateerror`: Akkor aktiválódik, amikor egy navigáció meghiúsul (pl. hálózati hiba vagy kezeletlen kivétel miatt).
• `currentchange`: Akkor aktiválódik, amikor az aktuális előzménybejegyzés megváltozik (pl. előre- vagy hátrafelé történő navigációkor).
• `dispose`: Akkor aktiválódik, amikor egy NavigationHistoryEntry már nem elérhető, például amikor egy `replaceState` művelet során eltávolítják az előzményekből.

Útvonalválasztás implementálása a Navigation API-val: Gyakorlati példa

Illusztráljuk, hogyan használható a Navigation API egy egyszerű SPA alapvető útvonalválasztásának megvalósítására. Vegyünk egy alkalmazást három nézettel: Kezdőlap, Rólunk és Kapcsolat.

Először hozzunk létre egy függvényt az útvonalváltozások kezelésére:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Kezdőlap
Üdvözöljük a Kezdőlapon!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Rólunk
Tudjon meg többet rólunk.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kapcsolat
Lépjen velünk kapcsolatba.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Az oldal nem található
Az oldal nem található.
';
  }
}

Ezután adjunk hozzá egy eseményfigyelőt a `navigate` eseményhez:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // A böngésző alapértelmezett navigációjának megakadályozása

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // A promise feloldása az útvonal kezelése után
  });

  event.transition = promise;
});

Ez a kód elfogja a `navigate` eseményt, kinyeri az URL-t az `event.destination` objektumból, megakadályozza a böngésző alapértelmezett navigációját, meghívja a `handleRouteChange` függvényt a tartalom frissítéséhez, és beállítja az `event.transition` promise-t. Az `event.transition` beállítása biztosítja, hogy a böngésző megvárja a tartalomfrissítés befejezését, mielőtt vizuálisan frissítené az oldalt.

Végül létrehozhat olyan linkeket, amelyek navigációt indítanak:

Kezdőlap | Rólunk | Kapcsolat

És csatoljon egy kattintásfigyelőt ezekhez a linkekhez:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Ez beállítja az alapvető kliensoldali útvonalválasztást a Navigation API segítségével. Mostantól a linkekre kattintva egy navigációs esemény aktiválódik, amely a `content` div tartalmát teljes oldalbetöltés nélkül frissíti.

Állapotkezelés hozzáadása

A Navigation API lehetővé teszi azt is, hogy állapotot társítson minden előzménybejegyzéshez. Ez hasznos az adatok megőrzéséhez a navigációs események között. Módosítsuk az előző példát egy állapotobjektum bevonásával.

A `navigation.navigate()` hívásakor átadhat egy `state` objektumot:

window.navigation.navigate('/about', { state: { pageTitle: 'Rólunk' } });

A `navigate` eseményfigyelőn belül az állapotot az `event.destination.getState()` segítségével érheti el:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Alkalmazásom'; // Alapértelmezett cím

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Kezdőlap
Üdvözöljük a Kezdőlapon!
';
      title = 'Kezdőlap';
      break;
    case '/about':
      contentDiv.innerHTML = '
Rólunk
Tudjon meg többet rólunk.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kapcsolat
Lépjen velünk kapcsolatba.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Az oldal nem található
Az oldal nem található.
';
      title = '404 Az oldal nem található';
  }
  document.title = title;
}

Ebben a módosított példában a `handleRouteChange` függvény most már elfogad egy `state` paramétert, és ezt használja a dokumentum címének frissítésére. Ha nincs állapot átadva, az alapértelmezett érték az 'Alkalmazásom' lesz.

A `navigation.updateCurrentEntry()` használata

Néha előfordulhat, hogy az aktuális előzménybejegyzés állapotát szeretné frissíteni anélkül, hogy új navigációt indítana. A `navigation.updateCurrentEntry()` metódus lehetővé teszi ezt. Például, ha a felhasználó megváltoztat egy beállítást az aktuális oldalon, frissítheti az állapotot, hogy tükrözze ezt a változást:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Beállítás frissítve:', setting, 'értékre:', value);
}

// Példa a használatra:
updateUserSetting('tema', 'sotet');

Ez a függvény lekéri az aktuális állapotot, beolvasztja a frissített beállítást, majd frissíti az aktuális előzménybejegyzést az új állapottal.

Haladó felhasználási esetek és megfontolások

1. Űrlapküldések kezelése

A Navigation API használható az űrlapküldések kezelésére SPA-kban, megelőzve a teljes oldalbetöltést és zökkenőmentesebb felhasználói élményt nyújtva. Elfoghatja az űrlapküldési eseményt, és a `navigation.navigate()` segítségével frissítheti az URL-t és megjelenítheti az eredményeket teljes oldalbetöltés nélkül.

2. Aszinkron műveletek

Navigációs események kezelésekor szükség lehet aszinkron műveletek végrehajtására, például adatok lekérésére egy API-ból. Az `event.transition` tulajdonság lehetővé teszi, hogy egy promise-t társítson a navigációs eseményhez, biztosítva, hogy a böngésző megvárja az aszinkron művelet befejezését az oldal frissítése előtt. Lásd a fenti példákat.

3. Görgetési pozíció visszaállítása

A görgetési pozíció megőrzése a navigáció során kulcsfontosságú a jó felhasználói élmény biztosításához. A Navigation API mechanizmusokat biztosít a görgetési pozíció visszaállítására, amikor előre vagy hátra navigál az előzményekben. A `NavigationHistoryEntry` `scroll` tulajdonságát használhatja a görgetési pozíció tárolására és visszaállítására.

4. Hibakezelés

Lényeges kezelni a navigáció során fellépő hibákat, például hálózati hibákat vagy kezeletlen kivételeket. A `navigateerror` esemény lehetővé teszi ezen hibák elegáns elkapását és kezelését, megakadályozva az alkalmazás összeomlását vagy hibaüzenet megjelenítését a felhasználónak.

5. Fokozatos bővítés (Progressive Enhancement)

Amikor SPA-kat építünk a Navigation API-val, fontos figyelembe venni a fokozatos bővítést. Győződjön meg róla, hogy az alkalmazás akkor is helyesen működik, ha a Navigation API-t nem támogatja a böngésző. Használhat funkcióészlelést (feature detection) a `navigation` objektum meglétének ellenőrzésére, és szükség esetén visszaléphet a hagyományos útvonalválasztási módszerekhez.

Összehasonlítás a hagyományos útvonalválasztási módszerekkel

Az SPA-k hagyományos útvonalválasztási módszerei gyakran a `window.location` objektum manipulálására vagy harmadik féltől származó könyvtárak, mint például a `react-router` vagy a `vue-router` használatára támaszkodnak. Bár ezek a módszerek széles körben elterjedtek és jól beváltak, vannak korlátaik:

• Teljes oldalbetöltések: A `window.location` közvetlen manipulálása teljes oldalbetöltést indíthat el, ami lassú lehet és megzavarhatja a felhasználói élményt.
• Bonyolultság: Az előzmények és az állapot kezelése hagyományos módszerekkel bonyolult és hibalehetőségeket rejtő lehet, különösen nagy és komplex alkalmazásokban.
• Teljesítmény többletterhelés: A harmadik féltől származó útvonalválasztó könyvtárak jelentős teljesítmény többletterhelést okozhatnak, különösen, ha nincsenek optimalizálva az alkalmazás specifikus igényeire.

A Navigation API ezeket a korlátokat kezeli egy letisztultabb, teljesítményorientáltabb és funkciókban gazdagabb megoldást nyújtva az útvonalválasztásra és előzménykezelésre. Kiküszöböli a teljes oldalbetöltéseket, egyszerűsíti az előzménykezelést, és részletes kontrollt biztosít a navigációs események felett.

Böngészőkompatibilitás

2024 végén a Navigation API jó támogatottsággal rendelkezik a modern böngészőkben, beleértve a Chrome-ot, a Firefoxot, a Safarit és az Edge-et. Mindig jó gyakorlat azonban ellenőrizni a legfrissebb böngészőkompatibilitási információkat olyan forrásokon, mint a Can I use, mielőtt a Navigation API-t éles alkalmazásokban implementálná. Ha a régebbi böngészők támogatása elengedhetetlen, fontolja meg egy polyfill vagy egy tartalék mechanizmus használatát.

Összegzés

A Navigation API egy hatékony eszköz modern, nagy teljesítményű SPA-k építéséhez, fejlett útvonalválasztási és előzménykezelési képességekkel. Az API funkcióinak kihasználásával a fejlesztők gyorsabb, zökkenőmentesebb és vonzóbb felhasználói élményeket hozhatnak létre. Bár a kezdeti tanulási görbe meredekebb lehet az egyszerűbb, régebbi módszerekhez képest, a Navigation API előnyei, különösen komplex alkalmazásokban, megérik a befektetést. Használja ki a Navigation API-t, és aknázza ki SPA-i teljes potenciálját.

További források

• MDN Web Docs: Navigation API
• WICG Navigation API specifikáció